<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="add-bottons right" @click="alertAdd()">
				新增部门
			</view>
		</view>
		
		<view class="menu-content left clearfix">
			<view class="menu-table left clearfix">
				<!--头部-->
				<view class="menu-tr left clearfix" style="font-weight:bold;color:#909399">
					<view class="menu-sort left">
						排序
					</view>
					<view class="menu-title left" style="padding-left:10px;">
						标题
					</view>
					
					
					
					<view class="menu-title left" style="width:100px;">
						是否启用
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						操作
					</view>
				</view>
				
				
				
				
				<view  v-for="(item,index) in menu">
				<view class="menu-tr left clearfix" style="color:#606266;">
					<view class="menu-sort left">
						{{item.sort}}
					</view>
					<view class="menu-title left" style="text-align: left;padding-left:10px;font-weight:500;">
						<label>
							<uni-icons :type="item.icon" size="15" color="#666" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							 {{item.title}}
						</label>
						
					</view>
					
					
					<view class="menu-title left" style="width:100px;text-align: center;">
						<label v-if="item.is_show==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="item.is_show==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						<view class="buttons left"  @click="alertAdd(item,index,1)">
							新建职位
						</view>
						
						<view class="buttons left" @click="alertAdd(item,index)">
							修改
						</view>
						
						<view class="buttons-del left" @click="remove(item,index)">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				
				
				<view class="menu-tr left clearfix" style="color:#606266;" v-for="(items,indexs) in item.position">
					<view class="menu-sort left">
						{{items.sort}}
					</view>
					<view class="menu-title left" style="text-align: left;padding-left:10px;">
						<uni-icons type="icon-jiantou_xiangyouliangci" size="15" color="#ccc" style="margin-left:15px;margin-right:5px;" custom-prefix="iconfont"></uni-icons>{{items.title}}
					</view>
					
					<view class="menu-title left" style="width:100px;text-align: center;">
						<label v-if="items.is_show==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="items.is_show==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						<view class="buttons left" style="background:#eee;">
							新建职位
						</view>
						
						<view class="buttons left"  @click="alertAdd(items,indexs)">
							修改
						</view>
						
						<view class="buttons-del left" @click="remove(item,index,items._id)">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				</view>
				
				
				
				
				
				<uni-popup ref="addPopup" type="center">
					<view class="add-box left clearfix">
						<view class="add-title left clearfix">
							<label>新增</label>
							<label @click="closeAdd()"><uni-icons type="closeempty" size="16" color="#666"></uni-icons></label>
						</view>
						
						<view class="add-content left clearfix">
							<uni-forms ref="form" :modelValue="formData" label-width="50">
								<uni-forms-item label="标题" name="title">
									<uni-easyinput v-model="formData.title" placeholder="名称，不可超过10个汉字" />
								</uni-forms-item>
								
								<uni-forms-item label="说明" name="desc">
									<uni-easyinput v-model="formData.desc" placeholder="请输入介绍" />
								</uni-forms-item>
								
								<uni-forms-item label="序号" name="sort">
									<uni-easyinput v-model="formData.sort" placeholder="数值越小，排名越靠前" />
								</uni-forms-item>
								
								<uni-forms-item label="上级" name="parent_id">
									<uni-easyinput disabled v-model="parentTitle" placeholder="自动获取，无需选择" />
								</uni-forms-item>
								
								
								
								<uni-forms-item label="显示" required name="is_show">
									<switch @change="setIsshow" :checked="formData.is_show" style="margin-top:5px;" />
								</uni-forms-item>
								
								
								
								<uni-forms-item label="" style="margin-top:50px;text-align: center;">
									
									<view class="form-quxiao-submit right" @click="closeAdd()">
										取消
									</view>
									
									<view class="form-submit right" @click="submitForm">
										确定
									</view>
									
								</uni-forms-item>
								
							</uni-forms>
						</view>
					</view>
				</uni-popup>
				
			</view>
		</view>
	</view>
</template>


<style scoped lang="scss">

	.fengmian-box{width:100%;height:100px;border:1px solid #eee;border-radius: 5px;background:#f8f8f8;line-height:100px;text-align:center;font-size:15px;color:#ccc;cursor:pointer;}
	.uni-forms-item__label{width:60px !important;}
	.form-quxiao-submit{width:80px;line-height:35px;height:35px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;font-size:14px;}
	.form-submit{width:80px;line-height:35px;height:35px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;font-size:14px;}
	.add-content{width:80%;margin-left:10%;margin-top:40px;}
	.add-title label:last-child{float:right;line-height:40px;height:40px;margin-right:20px;font-size:14px;color:#333;}
	.add-title label:first-child{float:left;line-height:40px;height:40px;margin-left:20px;font-size:14px;color:#333;font-weight:500;}
	.add-title{width:100%;line-height:40px;height:40px;border-bottom:1px solid #eee;}
	.add-box{width:700px;height:600px;background:#fff;border-radius: 12px;}
	.menu-title label{float:left;margin-right:5px;}
	.menu-title{width:calc(100% - 450px);height:45px;border-right:1px solid #eee;line-height:45px;text-align:center;font-size:14px;}
	.menu-sort{width:100px;height:45px;line-height:45px;text-align:center;font-size:14px;border-right:1px solid #eee;}
	.menu-tr:hover{background:#f8f8f8;}
	.menu-tr{width:100%;height:45px;border-bottom:1px solid #eee;}
	.menu-table{width:100%;border:1px solid #eee;border-bottom:none;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"system-menu",
		data() {
			return {
				parentTitle:'',
				currentIndex:null,
				formData:{
					title:'',
					desc:'',
					sort:0,
					is_show:true
				},
				menu:[],
				routes: [
				        {
				          to: "/A",
				          name: "权限管理",
				        },
				        {
				          to: "/B",
				          name: "部门管理",
				        }
				      ],
			};
		},
		mounted() {
			this.getSystemMenu();
		},
		methods:{
			//提交添加
			submitForm(){
				var formData = this.formData;
				console.log('formData',this.formData);
				if(!formData.sort){
					formData.sort == parseInt(0);
				}
				if(!formData.title){
					uni.showToast({
						title:'请输入标题',
						duration:2000
					})
					
					return false;
				}
				formData.sort = parseInt(formData.sort);
				uni.showLoading({
					title:'保存中'
				})
				var index = this.currentIndex;
				if(!this.parentTitle){
					console.log(111111);
					if(!formData._id){
						db.collection('userinfo_position').add(formData).then(res=>{
						   this.formData._id = res.result.id;
							uni.showToast({
								title:'添加成功',
								duration:2000
							})
							uni.hideLoading()
							this.$refs.addPopup.close();
						});
					}else{
						var id = formData._id;
						delete formData._id;
						db.collection('userinfo_position').where({_id:id}).update(formData).then(res=>{
							uni.showToast({
								title:'修改成功',
								duration:2000
							})
							this.menu[index] = formData;
							uni.hideLoading()
							this.$refs.addPopup.close();
						});
					}
					
				}else{
					console.log(22222,formData._id);
					var id = formData._id;
					delete formData._id;
					var global = uniCloud.importObject('global',{customUI:true});
					global.updateArrayData(id,formData).then(res=>{
						uni.showToast({
							title:'操作成功',
							duration:2000
						})
						uni.hideLoading()
						this.$refs.addPopup.close();
					})
				}
				
			},
			//关闭菜单
			closeAdd(){
				this.$refs.addPopup.close();
			},
			//添加
			alertAdd(item = null,index = null,children = null){
				if(item == null){
						this.formData = {
							title:'',
							desc:'',
							sort:0,
							is_show:true
						}
					}else if(item && children==null){
						this.formData = item;
						
					}else if(item && children){
						this.formData._id = item._id;
						this.parentTitle = item.title;
					}
				
				this.$refs.addPopup.open();
			},
			//删除
			remove(item,index,children=false){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							if(item._id.length > 5){
								if(children == false){
									db.collection('userinfo_position').where({_id:item._id}).remove().then(res=>{
										that.menu.splice(index,1);
									});
								}else if(children){
									db.collection('userinfo_position').where({_id:item._id}).get({getOne:true}).then(result=>{
										var data = result.result.data;
										var childrens = data.children;
										var indexs = childrens.findIndex(item=>item._id == children);
										childrens.splice(indexs,1);
										db.collection('userinfo_position').where({_id:item._id}).update({children:childrens}).then(result=>{
											that.menu[index].children.splice(indexs,1);
										});
									});
								}
								
							}
						}
					}
				});
			},
			//获取菜单列表
			getSystemMenu(){
				uni.showLoading({
					title:'加载中'
				})
				db.collection('userinfo_position').orderBy('sort asc').get().then(res=>{
					uni.hideLoading();
					this.menu = res.result.data;
				}).catch(err=>{
					uni.hideLoading();
				});
			}
		}
	}
</script>
